<template>
  <div class="dataView">
    <el-card>
    <div id="main1"></div>
    </el-card>
    <el-card>
    <div id="main2"></div>
    </el-card>
  </div>
</template>

<script>
import {getDataView} from '@/service/api/login'
  export default {
   async created(){
     const {data:res}= await getDataView()
     console.log(res)
      this.draw(res.data.legend,res.data.xAxis,res.data.series)
    },
    mounted(){
      const myChart = this.$echarts.init(document.getElementById('main1'))
      const  option = {
        title:{
          text:'学生地区分布'
        },
        tooltip:{
          show :true
        },
        color:['#950c0c'],
        xAxis: {
          type: 'category',
          data: ['湛江', '广州', '深圳', '东莞', '肇庆', '珠海']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:'人数',
            data: [200, 180, 150, 80, 50, 110],
            type: 'bar'
          }
        ]
      }
      option && myChart.setOption(option)
          },
    methods:{
      draw(legend,xAxis,series){
        const myChart = this.$echarts.init(document.getElementById('main2'))
        const  option = {
         title:{
          text:'学生出勤率'
        },
        tooltip:{
           trigger:'axis'
        },
        legend:{
          data:legend
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: series
        
      }
      option && myChart.setOption(option)
      }
    }

        }
</script>

<style lang="scss" scoped>
.dataView{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-card{
      width: 50%;
      #main1,#main2{
        width: 100%;
        height: 500px;
      }
    }
}
</style>